<template>
    <div class="container">
        <div id="login">
            <div class="login_part login_part1">
                <div class="login_message">
                    <input
                            class="login_message_content"
                            v-model='idCard' placeholder="输入身份证"
                            @blur="checkoutID()"
                    />
                </div>
                <div class="login_message">
                    <input
                            class="login_message_content"
                            v-model='name' placeholder="输入姓名"
                            @blur="checkoutName()"
                    />
                </div>
                <div class="login_message">
                    <input
                            class="login_message_content"
                            v-model="telephone" placeholder="输入手机号码"
                            @blur="checkoutTel()"
                    />
                </div>
                <div class="login_message">
                    <input
                            class="login_message_content"
                            v-model='code' placeholder="输入验证码"
                            @blur="checkoutCode()"
                    />
                    <a @click="getCode()" class="login_message_code" :disabled="!show">
                        <span v-show="show">发送验证码</span>
                        <span v-show="!show" class="count">{{count}} s</span>
                    </a>
                </div>
            </div>
            <div class="login_part login_part2">
                <div class="login_message">
                    <input class="login_message_content"
                           v-model="password" placeholder="输入密码"
                           @blur="pasValidate()"
                    />
                </div>
                <div class="login_message">
                    <input class="login_message_content"
                           v-model="password1" placeholder="确认密码"
                           @blur="pasValidate1()"
                    />
                </div>
            </div>
            <div class="login_button" @click="register()">
                注册
            </div>
            <!-- <div
                class="login_button login_button1"
                @click="getOauth()"
                v-show="shareCode"
            >
            不注册直接购买
            </div> -->
            <errorTip :errorTipVisible.sync="errorTipVisible" :message="errorMessage"/>
        </div>
		<transition name="fade">
			<div class="welcome" v-if="welcome">
				<div class="countdown" ref="countdown">{{countdown}}</div>
			</div>
		</transition>
    </div>

</template>
<script>
import '../../css/layout.css'
import errorTip from '../../components/errorTip/errorTip'
import User from '_common/services/user.js'
import '@/utils/rem.js';
import {getQuery} from '@/utils/utils'
const TIME_COUNT1 = 60;
export default {
  	name: 'login',
  	data() {
  		return {
			idCard: '',
			name: '',
			telephone: '',
			code: '',
			password: '',
			password1: '',
			show: true,
			count: '',
			timer: null,
			errorTipVisible: false,
			errorMessage: '',
			countdown: 3,
			welcome: true,
  		}
  	},
  	computed: {
	},
	mounted() {
	},
  	methods: {
		checkoutID() {
			if (this.errorTipVisible) return false;
			if (this.idCard === '') {
				this.errorMessage = '身份证不能为空';
				this.errorTipVisible = true;
				return false;
			} else if (!this.$validate.checkID(this.idCard)) {
				this.idCard = '';
				this.errorMessage = '身份证格式错误';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
		checkoutName() {
		  if (this.errorTipVisible) return false;
          if (this.name === '') {
				this.errorMessage = '用户名不能为空';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
		checkoutTel() {
			if (this.errorTipVisible) return false;
			if (this.telephone === '') {
				this.errorMessage = '手机号不能为空';
				this.errorTipVisible = true;
				return false;
			} else if (!this.$validate.tel(this.telephone)) {
				this.telephone = '';
				this.errorMessage = '手机号格式错误';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
		checkoutCode() {
			if (this.errorTipVisible) return false;
			if (this.code === '') {
				this.errorMessage = '验证码不能为空';
				this.errorTipVisible = true;
				return false;
			} else if (!this.$validate.yzm(this.code)) {
				this.code = ''
				this.errorMessage = '验证码格式错误';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
      pasValidate() {
		if (this.errorTipVisible) return false;
        if (this.password.trim() === '') {
          this.errorMessage = '密码不能为空';
          this.errorTipVisible = true;
          return false;
        } else if (!this.$validate.pws(this.password)) {
          this.password = ''
          this.errorMessage = '密码应该为6-16位';
          this.errorTipVisible = true;
          return false;
        }
        return true;
      },
      pasValidate1() {
		if (this.errorTipVisible) return false;
        if (this.password1.trim() !== this.password.trim()) {
          this.errorMessage = '与第一次输入的密码不同，请您重新输入';
          this.errorTipVisible = true;
          this.password1 = '';
          return false;
        }
        return true;
      },
		getCode(){
          if (!this.checkoutTel()) return false;
			if (!this.timer) {
              User.requestCode({
                type: 1,
				phoneNumber: this.telephone
				}).then(res => {
                if (res.code === 407) {
					this.$alertTip({
                        message: res.msg,
						time: 2000
					});
					return false;
				} else if(res && res.msg) {
					this.$alertTip({
						message: res.msg,
						time: 2000
					});
					this.count = TIME_COUNT1;
					this.show = false;
					this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT1) {
						this.count--;
					} else {
						this.show = true;
						clearInterval(this.timer);
						this.timer = null;
					}
					}, 1000)
					}
				});
            }
		},
		register() {
				if(!this.checkoutID() || !this.checkoutCode() || !this.checkoutTel()
                  || !this.checkoutName() || !this.pasValidate() || !this.pasValidate1()) return false;
          User.register({
            phoneNumber: this.telephone.trim(),//手机号
            realName: this.name.trim(),//姓名
            idNumber: this.idCard.trim(),//身份证号
			password: this.$md5(this.password),//密码，简单md5加密即可
            verificationCode: this.code.trim(),//验证码
			shareCode: getQuery('shareCode') || '',
			agencyId: getQuery('agencyId') || '',
				}).then(res => {
					if(res.code === 0) {
						this.$alertTip(res.msg);
						this.$openRouter({
							name: 'login',
						})
					} else {
						this.$alertTip(res.msg || '注册失败， 请重新尝试');
					}
				});
		},
    },
    mounted(){
      this.interval = setInterval(() => {
        this.countdown--;
        if (this.countdown === 0) {
          this.welcome = false;
          clearInterval(this.interval)
        }
      }, 1000)
    },
    components: {
		errorTip,
    }
}  
</script>

<style lang="less">
#login {
	position: absolute;
	left: 0;
    top: 0;
	z-index: 10;
	width: 100%;
	box-sizing: border-box;
	height: 100%;
	background-color: #f8f8f8;
	.login_part {
		background-color:  white;
		padding-left: 32px;
		.login_message {
			border-bottom: 1px solid #eaeaea;
			width: 100%;
			height: 88px;
			box-sizing: border-box;
			padding: 0 32px 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: white;
			.login_message_content {
				outline:none;  
				border:0px;
				width: 70%;
                font-size: 30px;
			}
			.login_message_code {
				color: #f3a13a;
				font-size: 24px;
			}
		}
	}
	.login_part2 {
		margin-top: 20px;
	}
	.login_button {
		margin: 64px auto 0;
		width: 680px;
		height: 88px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		font-size: 36px;
		color: white;
		background-color: #f3a13a;
		&:hover {
			color: #fef5eb;
		}
	}
	.login_button1 {
		margin-top: 20px; 
		color: #f3a13a;
		background-color: white;
		border: 2px solid #f3a13a;
		&:hover {
			color: #f3a13a;
			background-color: #fef5eb;
		}
	}
}

.welcome {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 20;
    background-color: #fb9564;
	background-image: url("./welcome.jpg");
	.countdown{
		position:absolute;
		top:10px;
		right:10px;
		background-color: #ef5a09;
		border-radius: 50%;
		width: 30px;
		height: 30px;
		font-size:16px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		&.fade-enter-active, &.fade-leave-active {
			transition: all 2s
		}
		&.fade-enter, &.fade-leave-to {
			opacity: 0
		}
	}
}

</style>